<template>
  <div class="login">
    <div class="login-box">
      <div class="title">用户登录</div>
      <div class="title-text">在下面输入您的详细信息</div>
      <el-input placeholder="请输入手机号/邮箱" v-model="username" clearable>
      </el-input>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
      <el-button class="btn" type="primary" @click="toLogin()">登录</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    toLogin() {
      this.$message.closeAll();
      if (!this.username || !this.password) {
        this.$message({
          showClose: true,
          message: "请输入账号密码",
          type: "warning",
        });
        return;
      }
      this.$api
        .toLogin({
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          if (res.code == 200) {
            window.sessionStorage["token"] = res.data.token;
            window.sessionStorage["userName"] = res.data.userId;
            this.$router.push("/");
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: error.msg,
            type: "error",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/css/mixin.scss";
@import "@/css/flex.scss";
.login {
  @include bgImg("../assets/icon/login-bk.png");
  @include wh(100%, 100%);
  background-size: cover;
  .login-box {
    position: fixed;
    right: 15%;
    top: 50%;
    transform: translate(0, -50%);
    background: #fff;
    border-radius: 3px;
    padding: 45px 20px;
    .title {
      @include sc(20px, #4c4c4c);
      // font-weight: bold;
      margin-bottom: 5px;
    }
    .title-text {
      @include sc(14px, #ababab);
      margin-bottom: 30px;
    }
    /deep/.el-input__inner {
      border: none;
      border-bottom: 1px solid #dddddd;
      border-radius: 0;
      margin-bottom: 10px;
      padding: 0 2px;
    }
    /deep/.el-button {
      width: 100%;
      height: 50px;
      margin-top: 50px;
      font-size: 18px;
    }
  }
}
</style>